<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>华猫商城</title>
		<style></style>
		<link href="../css/common.css" rel="stylesheet">
		<link href="../css/goods.css" rel="stylesheet">
		<link href="../css/base.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../css/detail.css" />
		<style>
			.ggw_div img{
				width:137px;
				cursor: pointer;
			}
			.hmNavItemBox.hmAllOtherAfter{
				height: 25px;
			    border: 1px solid #eee;
			    position: absolute;
			    bottom: -172px;
			    width: 80px;
			    left: 49px;
			}
		</style>
	</head>

	<body>
		<div id="app">

			<div id="header"></div>
			
			<!--<div id="headerBox"></div>-->
	
			<div id="hmNav"></div>

			<div class="ZZHT-w">
				<div class="ZZHT-filters">
					<div id="shopHeader">
						<div class='ZZHT-logo fl'>
							<a href="index.html" title="华猫商城">
								<img src="../images/index/logo.png" title="华猫商城" alt="华猫商城" height="60">
							</a>
						</div>
					</div>
					<div class="shopInfo" v-for="(v,i) in goods">
						<a :href='"shopHome.html?shopId="+v.shopId'>
							<template v-if="v.logo.substr(0,4)=='http'">
								<img class="shopsImg" :src="v.logo" :title="v.goodsName" :alt="v.goodsName" style="width: 50px; height: 50px; display: inline;float:left;border:1px solid #aaa;">
							</template>
							<templage v-else>
								<img class="shopsImg" :src="imgUrlS+v.logo" :title="v.goodsName" :alt="v.goodsName" style="width: 50px; height: 50px; display: inline;float:left;border:1px solid #aaa;">
							</templage>
						</a>
						<div class="fl">
							<div class="shopInfo_title">{{v.shopName}}</div>
							<div class="shopInfo_score">
								<div class="itemScore fl">商品评价：{{scores.goodsScore}}</div>
								<div class="itemScore fl">服务评分：{{scores.serviceScore}}</div>
								<div class="itemScore fl">物流速度：{{scores.timeScore}}</div>
								<div class="footer" style="float: left;margin-top: -5px;">
									<a class="j-fav2 fl" href="javascript:void(0);" :id='"addFavorite_"+v.shopId' @click="addFavorite(1,v.shopId)">收藏店铺</a>
								</div>
								<div class="ZZHT-clear"></div>
							</div>
						</div>
					</div>
					<div class="search_box">
						<input type="text" class="search_val" placeholder="搜索商品"/>
						<button type="button" class="search_shop">搜本店</button>
						<button type="button" class="search_all">搜全站</button>
					</div>
					<div class="ZZHT-clear"></div>
				</div>
			</div>
			<div class="ZZHT-w shop_top_class">
				<div class="ZZHT-filters">
					<div class="item">
						<a class="link" :href='"shopHome.html?shopId="+shopId'>首页</a>
					</div>
					<div class="item">
						<a class="link" href="">全部分类</a>
						<i class="arrow">&gt;</i>
					</div>
					<div class="item" v-for="v in shop_class">
						<a class="link" href="">{{v}}</a>
					</div>

					<div class="ZZHT-clear"></div>
				</div>
			</div>
			<div class="ZZHT-w">
				<div class="ZZHT-filters" style="padding: 5px 0px;">
					<div class="item">
						<a class="link" href="../view/index.html">首页</a>
					</div>
					<div class="item">
						<a class="link" href="">全部分类</a>
						<i class="arrow">&gt;</i>
					</div>
					<div class="item" v-for="v in hm_class">
						<a class="link" href="">{{v}}</a>
						<!--<i class="arrow">&gt;</i>-->
					</div>
					<div class="ZZHT-clear"></div>
				</div>
			</div>
			<div class="ZZHT-w">
				<div class="ZZHT-container" v-for="(v,i) in goods">
					<div class="goods-img-box">
						<div class="goods-img spec-preview" id="preview">
							<img :title="v.goodsName" :alt="v.goodsName" :src="src" class="cloudzoom" height="350" width="350" style="border:1px solid #aaa;">
						</div>
						<div class="goods-pics">
							<a class="prev" style="box-sizing: content-box;">&lt;</a>
							<a class="next" style="box-sizing: content-box;">&gt;</a>
							<div class="items">
								<ul>
									<li v-for="item in v.gallery">
										<img :title="v.goodsName" :alt="v.goodsName" :src="item.src" class="cloudzoom-gallery" :data-cloudzoom="item.cloudzoom" width="60" height="60">
									</li>
								</ul>
							</div>
						</div>

						<div class="ZZHT-clear"></div>

					</div>

					<div class="intro" v-cloak>
						<p class="intro_title">{{v.goodsName}}</p>
						<div class="summary">
							<div class="infol">
								<div class="box_price">
									<div class="aj">
										价&nbsp;&nbsp;&nbsp;&nbsp;格
									</div>
									<div class="jga">
										<div class="spa">￥{{v.shopPrice}}</div>
										<div class="market-price">￥{{v.marketPrice}}</div>
									</div>

									<div class="pja">
										<div class="pja_div">
											<p class="p1">{{v.shopPrice*v.scoreRatio}}</p>
											<p>可送积分</p>
										</div>
										<div class="pja_div1">
											<p class="p1">{{v.appraiseNum}}</p>
											<p>累计评论</p>
										</div>
									</div>
								</div>

								<div class="item item_sppf" style="margin-top: 10px;">
									<div class="dt">商品评分</div>
									<div class="dd">
										<div v-if="goodsScore == '0'">
											<p>暂无该商品评分</p>
										</div>
										<div v-else>
											<img v-for="v in goodsScore" src="../img/star-on.png" />
										</div>
									</div>
								</div>
								<div class="item">
									<div class="dt">商品编号</div>
									<div class="dd">{{v.goodsSn}}</div>
								</div>
								<div class="item">
									<div class="dt">服&nbsp;&nbsp;&nbsp;&nbsp;务</div>
									<div class="dd">服务由
										<a class="ZZHT-fred" @click="go_shoplist(v.shopId)" target="_blank">{{v.shopName}}</a> 发货并提供 售后服务。
									</div>
								</div>
							</div>
							<div class="ZZHT-clear"></div>
						</div>
						<div class="spec">
						</div>
						<div class="buy">
							<div class="item" v-for="v in spec.specItemss">
								<div class="dt" style="line-height: 45px;">{{v.catName}}</div>
								<div class="dd">
									<ul class="ul1">
										<template v-for="(item,k) in v.itemDesc" v-if="item.isShow==1">
											<li v-if="k==0" class="active" :id='"item_"+item.itemId' @click="changeItem(item.itemId)">{{item.val}}</li>
											<li v-else :id='"item_"+item.itemId' @click="changeItem(item.itemId)">{{item.val}}</li>
										</template>
									</ul>
								</div>
							</div>
							<div class="item">
								<div class="dt">数&nbsp;&nbsp;&nbsp;&nbsp;量</div>
								<div class="dd">
									<a href="#none" class="buy-btn" id="buy-reduce" style="color:#ccc;" onclick="javascript:ZZHT.changeIptNum(-1,&quot;#buyNum&quot;,&quot;#buy-reduce,#buy-add&quot;)">-</a>
									<input type="text" id="buyNum" class="buy-num" value="1" data-min="1" autocomplete="off" onkeyup="ZZHT.changeIptNum(0,&quot;#buyNum&quot;,&quot;#buy-reduce,#buy-add&quot;)" onkeypress="return ZZHT.isNumberKey(event);" maxlength="3" data-max="99">
									<a href="#none" class="buy-btn" id="buy-add" onclick="javascript:ZZHT.changeIptNum(1,&quot;#buyNum&quot;,&quot;#buy-reduce,#buy-add&quot;)">+</a>
									<div style="padding-left:15px;line-height:27px;" class="fl">当前剩余库存：<span style="color:#ea5404;">{{v.goodsStock}}</span></div>
								</div>
							</div>

							<div class="item" style="padding-left:75px;margin-top:20px;">
								<a id="addBtn" href='javascript:addCart(0,"#buyNum")' class="addBtn">加入购物车</a>
								<a id="buyBtn" href='javascript:addCart(1,"#buyNum")' class="buyBtn">立即购买</a>
								<div class="bot">
									<div class="ZZHT-favorite">
										<a href="javascript:void(0);" :id='"addFavorite_"+goodsId' @click="addFavorite(0,goodsId)" class="favorite j-fav2 j-fav3">收藏商品</a>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="ggw">
						<div class="ggw_title">相似好物</div>
						<div class="ggw_div" v-for="(v,i) in shop_hot" v-if="i<3" style="border:1px solid #eee;margin:5px;">
							<a :href='"detail.html?goodsId="+v.goodsId'>
								<img v-if="v.goodsImg.substr(0,4)=='http'" :src="v.goodsImg" />
								<img v-else :src="imgUrlS+v.goodsImg" />
								<!--<p class="p1">烟台大樱桃车厘子新鲜水果</p>-->
								<p class="p2">￥{{v.shopPrice}}</p>
							</a>
						</div>
						<!--<div class="ggw_div">
							<img src="../img/2f7a1ee4ddda87864e4a8210ee10eeac.jpg" />
							<p class="p2">￥29.90</p>
						</div>
						<div class="ggw_div">
							<img src="../img/2f7a1ee4ddda87864e4a8210ee10eeac.jpg" />
							<p class="p2">￥29.90</p>
						</div>-->

					</div>
					<div class="ZZHT-clear"></div>
				</div>
			</div>
			<div class="background">

				<!--<div class="hwtj">
					<div class="hwtj_txt">好物推荐</div>
					<div class="hwtj_div">

						<div class="hwtj_img">
							<img src="../img/2f7a1ee4ddda87864e4a8210ee10eeac.jpg" />
							<p>19.8</p>
						</div>

						<div class="hwtj_img">
							<img src="../img/2f7a1ee4ddda87864e4a8210ee10eeac.jpg" />
							<p>19.8</p>
						</div>

						<div class="hwtj_img">
							<img src="../img/2f7a1ee4ddda87864e4a8210ee10eeac.jpg" />
							<p>19.8</p>
						</div>

						<div class="hwtj_img">
							<img src="../img/2f7a1ee4ddda87864e4a8210ee10eeac.jpg" />
							<p>19.8</p>
						</div>

						<div class="hwtj_img">
							<img src="../img/2f7a1ee4ddda87864e4a8210ee10eeac.jpg" />
							<p>19.8</p>
						</div>

						<div class="hwtj_img">
							<img src="../img/2f7a1ee4ddda87864e4a8210ee10eeac.jpg" />
							<p>19.8</p>
						</div>

					</div>

				</div>-->

				<div class="ZZHT-w" style="padding-top:15px;">
					<div class="ZZHT-container">
						<div class="ZZHT-side">
							<div class="shop-intro" v-for="(v,i) in goods">
								<div class="title v-ellipsis">{{v.shopName}}</div>
								<div class="body">
									<div class="totalScore">
										<a :href='"shopHome.html?shopId="+v.shopId'>
											<img v-if="v.logo.substr(0,4)=='http'" class="shopsImg" :src="v.logo" :title="v.goodsName" :alt="v.goodsName" style="width: 75px; height: 75px; display: inline;">
											<img v-else class="shopsImg" :src="imgUrlS+v.logo" :title="v.goodsName" :alt="v.goodsName" style="width: 75px; height: 75px; display: inline;">
										</a>
									</div>
									<div class="itemScore">商品评价：{{scores.goodsScore}}</div>
									<div class="itemScore">服务评分：{{scores.serviceScore}}</div>
									<div class="itemScore">物流速度：{{scores.timeScore}}</div>
								</div>
								<div class="footer">
									<div class="ZZHT-clear"></div>
								</div>
							</div>
							<div class="goods-side">
								<div class="guess-like">
									<div class="title">热卖商品</div>
									<div class="item" v-for="v in shop_hot">
										<div class="img">
											<a target="_blank" :href='"detail.html?goodsId="+v.goodsId'>
												<img :title="v.goodsName" :alt="v.goodsName" v-if="v.goodsImg.substr(0,4)=='http'" :src="v.goodsImg">
												<img :title="v.goodsName" :alt="v.goodsName" v-else :src='imgUrlS+v.goodsImg'>
											</a>
										</div>
										<div class="p-name">
											<a class="ZZHT-hide ZZHT-redlink">{{v.goodsName}}</a>
										</div>
										<div class="p-price clearfix">
											<span class="t-price">￥{{v.shopPrice}}</span>
											<span class="v-price">￥{{v.marketPrice}}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="goods-desc">
							<div id="tab" class="ZZHT-tab-box">
								<ul class="ZZHT-tab-nav">
									<li class="on">商品介绍</li>
									<!--<li>商品属性</li>-->
									<li>商品评价</li>
								</ul>
								<div class="ZZHT-tab-content" style="width:100%;margin-bottom: 10px;min-height:312px;">
									<div class="ZZHT-tab-item" style="position: relative;">
										<template v-for="(v,i) in goods">
											<div v-html="v.goodsDesc"></div>
										</template>
									</div>
									<!--<div class="ZZHT-tab-item" style="position: relative;display:none">
										<table class="ZZHT-attrs-list">
										</table>
									</div>-->
									<div class="ZZHT-tab-item" style="position: relative;display:none">
										<table class="ZZHT-attrs-list">
											<div class="reviews_row" v-for="v in reviews">
												<div class="buyer fl">
													<template v-if="v.userPhoto">
														<img v-if="v.userPhoto.substr(0,4)=='http'" :src="v.userPhoto" alt=""/>
														<img v-else :src='imgUrlS+v.userPhoto' alt=""/>
													</template>
													<template v-else>
														<!--默认头像-->
														<img src="../img/dd9a821c0a37c39585863634874d3f6b.png" alt=""/>
													</template>
													
													<div class="buyer_name">{{v.loginName}}</div>
												</div>
												<div class="reviews_content fl">
													<div class="reviews_star">
														<img v-for="item in parseInt(v.goodsScore)" src="../img/star-on.png" />
													</div>
													<div class="reviews_text">
														{{v.content}}
													</div>
													<div class="reviews_img" v-if="v.images.length>0">
														<template v-for="src in v.images">
															<img v-if="src.substr(0,4)=='http'" :src="src" alt="" width='60' height='60'/>
															<img v-else :src="imgUrlS+src" alt="" width='60' height='60'/>
														</template>
													</div>
													<div class="reviews_time">{{v.createTime}}</div>
													<div class="reply" v-if="v.shopReply">
														<div>{{v.shopName}} 回复：</div>
														<div class="reviews_text">
															{{v.shopReply}}
														</div>
														<div class="reviews_time">{{v.replyTime}}</div>
													</div>
												</div>
											</div>
										</table>
									</div>
								</div>
							</div>

						</div>
						<div class="ZZHT-clear"></div>
					</div>
					<div class="ZZHT-clear"></div>
				</div>
			</div>
			<div id="ck1"></div>
			<div id="ck3"></div>

		</div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/common_view.js"></script>
		<script type="text/javascript" src="../js/qrcode.js"></script>
		<script type="text/javascript" src="../plugin/layer/layer.js"></script>
		<script type="text/javascript" src="../js/ljf_base.js"></script>

		<script type="text/javascript" src="../js/cloudzoom.js"></script>
		<script src="../js/lxs_jk.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/detail.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var goodsInfo = {};
			var goodsId = '';
			$(function() {
				init();
			})
			goodsId = gup('goodsId');
			
			var vm = new Vue({ //new 一个实例
				el: '#app', //作用域 父及的id 我这里放到了整个内容区
				data: { //数据源
					imgUrlS: imgUrlS,
					goodsId: goodsId,
					shopId:'',
					goods: [],
					hm_class: [], //所属商城分类
					shop_class: [], //所属商城分类
					src: '../img/38420d77457f1533e9128ccd9d374b2c.jpg',
					cloudzoom: '',
					spec: {
						specItemss: [], //商品规格列表
						goodsSpecss: [], //商品价格
						listArr: [], //重新组合后的二维数组
					},
					shop_hot:[],//店铺热销商品
					reviews:[],//商品评论
					scores:{
						goodsScore:5,
						serviceScore:5,
						timeScore:5,
					},//商品评分
				},
				methods: {
					go_shoplist: function(id) {
						location.href = "../view/shopHome.html?shopId=" + id;
					},
					addFavorite: function(type, id) {
						addFavorite(type,id);
					},
					changeItem: function(id) { //选择不同的规格
						$('#item_' + id).siblings('li').removeClass('active');
						$('#item_' + id).addClass('active');

						changeItem();
					},
				}
			});
		</script>
	</body>

</html>